<template>
  <div>
    <el-drawer
      :title="editConfig.title"
      :visible.sync="editConfig.deviceDrawer"
      direction="rtl"
      :before-close="handleClose">
      <div class="box">
        <el-input
          type="textarea"
          placeholder="请输入车牌号码"
          :rows="3"
          v-model="textArea"
          show-word-limit
        >
        </el-input>
        <p>车牌号以逗号或回车键隔开，单次最多支持100条上传，例如：京YAB123,京F34Y87</p>
        <div class="box_btn">
          <el-button @click="closeCarNumber">取消</el-button>
          <el-button type="primary" @click="addCarNumber">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  multiUploadCarNo
} from "@/api/baseLibrary/baseLibrary"
export default {
  props: {
    editConfigForm:{
      type: Object,
      default: () => {
        return {
          deviceDrawer: true,
          title: "修改信息",
          infomation: {}
        }
      }
    }
  },
  data() {
    return {
      editConfig:this.editConfigForm,
      deviceDrawer:true,
      textArea: ''
     
    };
  },
  computed: {
    uploadData() {
      return {
        picType: 0
      }
    },
    uploadDataUser(){
      return {
        picType:1
      }
    }

  },
  created() {
  },
  mounted() {

  },
  watch: {

  },
  methods: {
    handleClose(done) {
      done();
    },
    closeCarNumber(){
      this.editConfig.deviceDrawer=false
    },
    addCarNumber(){
      let carNos = this.textArea.split(/[\s,]+/);  
      multiUploadCarNo({
        carNos:carNos,
        tableId:this.editConfig.infomation.tableId
      }).then((res)=>{
        if(res.success){
          this.$message.success("车牌上传成功!")
          this.$parent.getPersonList({
            tableId: this.editConfig.infomation.tableId,
            page: 1,
            size: 15,
            contentValue: "",
            orderType: "desc",
            orderName: "createTime",
          })
          this.editConfig.deviceDrawer=false
        }else{
          this.$message.error(res.msg)
        }
      })
    },
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
::v-deep {
  .el-drawer__header{
    background-color: #1F2935 !important;
    span, i{
      color:#fff !important;
    }
    span{
      text-align:center;
    }
  }
  .el-drawer__title{
    background-color: #1F2935 !important;
  }
  .el-drawer__body{
    background-color: #1F2935 !important;
  }
  .el-drawer{
    background-color: #1F2935 !important;
    color:#fff !important;
    .el-drawer__header{
      border-bottom:1px solid #fff ;
      padding: 30px 0px;
    }
    .box{
      padding:20px;
      height: 100%;
      .el-textarea{
        height:80%;
        textarea{
          height: 100%;
          border: 1px solid #fff;
          background-color: #1F2935 !important;
          color: #fff;
          font-size: 20px;
        }
      }
      p{
        font-size: 16px;
      }
      .box_btn{
        display: flex;
        justify-content: center;
        .el-button{
          width: 140px;
          height: 38px;
        }
      }
    }
  }
} 
</style>
